import React from 'react';
import { Modal } from '../UI/Modal';
import { AmapContainer } from './AmapContainer';
import { Vehicle, Route } from '../../types';
import { Badge } from '../UI/Badge';
import { 
  MapPin, 
  Navigation, 
  Truck, 
  Clock,
  Activity,
  Settings,
  AlertTriangle,
  CheckCircle
} from 'lucide-react';

interface MapModalProps {
  isOpen: boolean;
  onClose: () => void;
  vehicles: Vehicle[];
  routes: Route[];
  onVehicleClick?: (vehicle: Vehicle) => void;
  onRouteClick?: (route: Route) => void;
}

export const MapModal: React.FC<MapModalProps> = ({
  isOpen,
  onClose,
  vehicles,
  routes,
  onVehicleClick,
  onRouteClick
}) => {
  const vehicleStats = {
    total: vehicles.length,
    available: vehicles.filter(v => v.status === 'available').length,
    inUse: vehicles.filter(v => v.status === 'in_use').length,
    maintenance: vehicles.filter(v => v.status === 'maintenance').length,
    offline: vehicles.filter(v => v.status === 'offline').length
  };

  const routeStats = {
    total: routes.length,
    active: routes.filter(r => r.isActive).length,
    inactive: routes.filter(r => !r.isActive).length
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="货运地图视图"
      size="xl"
    >
      <div className="space-y-6">
        {/* 统计概览 */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="bg-gradient-to-r from-primary-50 to-primary-100 rounded-lg p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-primary-700">总车辆</p>
                <p className="text-2xl font-bold text-primary-800">{vehicleStats.total}</p>
              </div>
              <Truck className="w-8 h-8 text-primary-600" />
            </div>
          </div>

          <div className="bg-gradient-to-r from-success-50 to-success-100 rounded-lg p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-success-700">可用</p>
                <p className="text-2xl font-bold text-success-800">{vehicleStats.available}</p>
              </div>
              <CheckCircle className="w-8 h-8 text-success-600" />
            </div>
          </div>

          <div className="bg-gradient-to-r from-warning-50 to-warning-100 rounded-lg p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-warning-700">使用中</p>
                <p className="text-2xl font-bold text-warning-800">{vehicleStats.inUse}</p>
              </div>
              <Activity className="w-8 h-8 text-warning-600" />
            </div>
          </div>

          <div className="bg-gradient-to-r from-secondary-50 to-secondary-100 rounded-lg p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-secondary-700">活跃路线</p>
                <p className="text-2xl font-bold text-secondary-800">{routeStats.active}</p>
              </div>
              <Navigation className="w-8 h-8 text-secondary-600" />
            </div>
          </div>
        </div>

        {/* 地图容器 */}
        <div className="h-96 md:h-[500px]">
          <AmapContainer
            vehicles={vehicles}
            routes={routes}
            onVehicleClick={onVehicleClick}
            onRouteClick={onRouteClick}
            className="w-full h-full"
          />
        </div>

        {/* 车辆状态详情 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h3 className="text-lg font-semibold text-gray-800 mb-4">车辆状态分布</h3>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-success-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <CheckCircle className="w-5 h-5 text-success-600" />
                  <span className="font-medium text-success-800">空闲车辆</span>
                </div>
                <Badge variant="success">{vehicleStats.available} 辆</Badge>
              </div>

              <div className="flex items-center justify-between p-3 bg-primary-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <Activity className="w-5 h-5 text-primary-600" />
                  <span className="font-medium text-primary-800">使用中</span>
                </div>
                <Badge variant="primary">{vehicleStats.inUse} 辆</Badge>
              </div>

              <div className="flex items-center justify-between p-3 bg-warning-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <Settings className="w-5 h-5 text-warning-600" />
                  <span className="font-medium text-warning-800">维护中</span>
                </div>
                <Badge variant="warning">{vehicleStats.maintenance} 辆</Badge>
              </div>

              <div className="flex items-center justify-between p-3 bg-error-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <AlertTriangle className="w-5 h-5 text-error-600" />
                  <span className="font-medium text-error-800">离线</span>
                </div>
                <Badge variant="error">{vehicleStats.offline} 辆</Badge>
              </div>
            </div>
          </div>

          <div>
            <h3 className="text-lg font-semibold text-gray-800 mb-4">路线状态</h3>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-secondary-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <Navigation className="w-5 h-5 text-secondary-600" />
                  <span className="font-medium text-secondary-800">活跃路线</span>
                </div>
                <Badge variant="secondary">{routeStats.active} 条</Badge>
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <Clock className="w-5 h-5 text-gray-600" />
                  <span className="font-medium text-gray-800">停用路线</span>
                </div>
                <Badge variant="info">{routeStats.inactive} 条</Badge>
              </div>

              <div className="p-3 bg-gradient-to-r from-primary-50 to-secondary-50 rounded-lg">
                <div className="text-sm text-gray-600 mb-2">平均路线距离</div>
                <div className="text-xl font-bold text-gray-800">
                  {routes.length > 0 
                    ? Math.round(routes.reduce((sum, r) => sum + r.distance, 0) / routes.length)
                    : 0
                  } 公里
                </div>
              </div>

              <div className="p-3 bg-gradient-to-r from-success-50 to-warning-50 rounded-lg">
                <div className="text-sm text-gray-600 mb-2">平均运输时间</div>
                <div className="text-xl font-bold text-gray-800">
                  {routes.length > 0 
                    ? Math.round(routes.reduce((sum, r) => sum + r.estimatedTime, 0) / routes.length)
                    : 0
                  } 小时
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};